<template>
  <div>
    <div class="itemMusicTop">
      <img :src="playList.coverImgUrl" alt="" class="bgImg">
      <div class="itemLeft">
        <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
          <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <span>MusicList</span>
      </div>
      <div class="itemRight">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caidan"></use>
        </svg>
      </div>
    </div>
    <div class="itemMusicMiddle">
      <div class="coverImg">
        <img :src="playList.coverImgUrl" alt="">
        <div class="playCount">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bofang"></use>
          </svg>
          <span>{{ changeCount(playList.playCount) }}</span>
        </div>
      </div>
      <div class="rightDesc">
        <div class="title">{{ playList.name }}</div>
        <div class="creator">
          <img :src="playList.creator.avatarUrl" alt="" class="creatorImg">
          <span class="creatorName">{{ playList.creator.nickname }}</span>
          <svg class="icon littleRight" aria-hidden="true">
            <use xlink:href="#icon-youjiantou"></use>
          </svg>
        </div>
        <div class="descBox">
          <div class="desc">{{ playList.description }}</div>
          <svg class="icon descArrow" aria-hidden="true">
            <use xlink:href="#icon-youjiantou"></use>
          </svg>
        </div>
      </div>
    </div>
    <div class="bottomIcons">
      <div class="iconBox">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-pinglun"></use>
        </svg>
        <span>{{ playList.commentCount }}</span>
      </div>
      <div class="iconBox">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang1"></use>
        </svg>
        <span>{{ playList.shareCount }}</span>
      </div>
      <div class="iconBox">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiazai"></use>
        </svg>
        <span>Download</span>
      </div>
      <div class="iconBox">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xuanze2"></use>
        </svg>
        <span>Choose</span>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  setup(props) {
    // 防止网速过慢，资源没来得及加载就报错了。
    //! 这里有bug，如果这里是空的，会话存储也是空的就会报错！拿不到playList!!!
    // 问题解决了：通过加一个v-if判断，如果获取接口的作者数据是空的话，那么就不渲染了
    // 为什么选择作者数据呢？因为这是一个比较里层的数据，是最后被获取到的一部分数据
    // 下面的老师这段代码其实并不好！！！，因为vue不建议修改props！
    // if (!props.playList.creator) {
    //   props.playList.creator = JSON.parse(sessionStorage.getItem('itemDetail')).playList.creator
    // }

    const changeCount = (num) => {
      if (num > 1000000) {
        return (num / 1000000).toFixed(1) + ' M'
      }
      if (num > 1000) {
        return (num / 1000).toFixed(1) + ' K'
      }
    }

    return { changeCount }
  },



  props: ['playList']
}
</script>

<style lang="less" scoped>
.icon {
  width: 1.8em;
  height: 1rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.itemMusicTop {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .bgImg {
    width: 120%;
    height: 70%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    filter: blur(20px) brightness(70%);
  }

  .itemLeft,
  .itemRight {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;

    span {
      font-size: 20px;
      font-family: 'Courier New', Courier, monospace;
      margin-left: 5px;
      color: white;
    }
  }

  .itemRight {
    width: 30%;
  }
}

.itemMusicMiddle {
  padding: .3rem .4rem 0;
  display: flex;
  justify-content: space-between;

  .coverImg {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;

    img {
      border-radius: .2rem;
      width: 100%;
      height: 100%;
    }

    .playCount {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      right: .1rem;

      .icon {
        width: .4rem;
        height: .4rem;
      }

      span {
        font-size: .2rem;
        color: white;
      }
    }
  }

  .rightDesc {
    padding-left: .4rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: .3rem;

    .title {
      color: white;
    }

    .creator {
      margin-top: .3rem;
      display: flex;
      align-items: center;

      img {
        border-radius: .5rem;
        width: .5rem;
        height: .5rem;
      }

      .creatorName {
        color: rgb(237, 237, 237);
        margin-left: .2rem;
        font-size: .28rem;
      }

      .littleRight {
        position: relative;
        top: .02rem;
        width: .4rem;
        height: .4rem;
      }
    }

    .descBox {
      position: relative;

      .descArrow {
        position: absolute;
        right: -.2rem;
        top: -0.16rem;
      }

      .desc {
        width: 200px;
        color: white;
        font-size: .24rem;
        margin-top: .2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}

.bottomIcons {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;

  .iconBox {
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon {
      width: .4rem;
      height: .4rem;
    }

    span {
      color: white;
      font-size: 14px;
      margin-top: 3px;
      font-family: 'Courier New', Courier, monospace;
    }
  }
}
</style>